<script setup lang='ts'>
import { ref, watch } from 'vue';
import QRCode from 'qrcode'
import { saveAs } from "file-saver-es";
import { toPng } from "html-to-image";

const props = defineProps({
  img: { // 分享图片的 img
    type: String,
    default: ''
  },
  link: { // 分享链接
    type: String,
    default: 'http://localhost:5173/#/pages/friend/friend?id=1'
  }
})

const qrlink = ref('')

QRCode.toDataURL(props.link)
  .then(url => {
    qrlink.value = url
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

watch(() => props.img, (val) => {
  if (val) {
    show.value = true
  }
})

const show = ref(true)

const container = ref<{ $el: HTMLElement } | null>(null)

function downloadImage() {
  const dom = container.value!.$el;
  toPng(dom)
    .then((dataUrl) => {
      saveAs(dataUrl, 'share.png')
    })
    .catch((err) => {
      console.error(err)
    })
}

</script>

<template>
  <uv-overlay :show="show && img != '' && link" @click="show = false">
    <view class='share-cover__container' ref="container">
      <view class="share-cover__wrapper">
        <image class="share-cover__cover" :src="img" mode="aspectFill"></image>
        <!-- 口号 -->
        <view class="share-cover__slogan">
          <view class="head">
            <image src="/static/logo.svg" style="width:80rpx;height: 80rpx;" mode="scaleToFill" />
            <text class="share-cover__slogan-text">Flaging</text>
          </view>
          <text class="share-cover__slogan-desc">每一站都有个故事</text>
        </view>
        <image class="share-cover__qrcode" :src="qrlink" mode="scaleToFill" />
      </view>
      <!-- 下载按钮 -->
      <view class="download-btn mt-40" @click.stop="downloadImage">
        <uv-icon name="download" size="40" color="#fff"></uv-icon>
        <!-- <view class="download-btn__text" style="color:#fff">下载图片</view> -->
      </view>
    </view>

  </uv-overlay>
</template>

<style scoped lang='scss'>
@import "@/styles/mixin/index.scss";

.share-cover {
  &__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  &__wrapper {
    position: relative;
    width: 65vw;
    height: 65vh;
    @include selfCenter();
  }

  &__cover {
    width: 100%;
    height: 100%;
  }


  &__qrcode {
    position: absolute;
    bottom: 20px;
    right: 10px;
    width: 100px;
    height: 100px;
  }

  &__slogan {
    position: absolute;
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f40;

    opacity: 0.6;
    border-radius: 20rpx;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // @include selfCenter();

    .head {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-text {
      font-size: 1.8rem;
      margin-left: 10px;
    }

    &-desc {
      font-size: 1.2rem;
    }

  }

}

.download-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #fff;

}
</style>